<lv-treetable
  [lvData]="data"
  #lvTreeTable
  lvCompareWith="data.id"
  lvVirtualScroll
  [lvScroll]="{ y: '400px' }"
  lvVirtualMinBuffer="96px"
  [lvVirtualTrackBy]="trackByIndex"
  lvSort
  #sort="lvSort"
  [lvSortDirct]="sort"
  lvSelectionMode="multiple"
  [lvSelection]="selection"
  (lvSelectionChange)="selectionChange($event)"
  (lvStateChange)="stateChange($event)"
>
  <thead>
  <tr>
    <th lvShowCheckbox lvCellKey="data.name">Name</th>
    <th lvCellKey="data.age">Age</th>
    <th lvCellKey="data.random" lvShowSort lvShowCustom>Random</th>
  </tr>
  </thead>
  <tbody>
  <ng-container *ngTemplateOutlet="bodyContentTpl; context: { $implicit: lvTreeTable.renderData }"></ng-container>
  <ng-template #bodyContentTpl let-data>
    <ng-container *ngFor="let renderItem of data">
      <ng-template lv-virtual-scroll let-virtualItem>
        <tr>
          <td
            [lvRowData]="virtualItem"
            lvShowCheckbox
            [lvShowExpanded]="virtualItem.children?.length"
            [lvExpandedToggleIcon]="{ true: 'lv-icon-arrow-down', false: 'lv-icon-arrow-right' }"
            [(lvExpanded)]="virtualItem.expanded"
            [lvPaddingLeft]="virtualItem._lv_level * 24 + 'px'"
            (lvExpandedChange)="expandedChange($event, virtualItem, data)"
          >
            <span lv-overflow>{{ virtualItem.data.name }}</span>
          </td>
          <td>{{ virtualItem.data.age }}</td>
          <td>{{ virtualItem.data.random }}</td>
        </tr>
      </ng-template>
    </ng-container>
  </ng-template>
  </tbody>
</lv-treetable>
